
@import "constants";

body{
    background: #F2F2F2;
}

.main{
    width: 100%;
    margin-top: $navHeight + 20px;
    .wrapper{
        width:$pageWidth;
        margin: 20px auto;
        overflow: hidden;
        .main-content-wrapper{

        }

    }
}

.main{
    .wrapper{
         .sidebar-wrapper{
             background: #fff;
             width: 355px;
             float: right;
             .title-group{
                 padding: 20px;
                 overflow: hidden;
                 .title{
                     float: left;
                     font-size: 18px;
                 }
                 .more{
                     color: #878787;
                     float: right;
                     font-size: 14px;

                 }

             }
             .advertise-group{
                 padding-top:20px;
                 height:130px;
                 width:355px;
                 a{
                     img{
                         width: 100%;
                         height:100%;
                     }
                 }
             }
             .focus-group{
                 padding:20px;
                 width:350px;
                 height:208px;
                 color: #ffffff;
                 overflow: hidden;
                 .left-group{
                     float: left;
                     width: 210px;
                     height:208px;
                     li{
                         margin-bottom: 20px;
                         height: 50px;
                         line-height: 50px;
                         background:url("https://www.bufanbiz.com/static/build/images/side-icon.png");
                         background-repeat:no-repeat;
                         background-size: 20%;
                         a{
                             margin-left: 60px;
                             color: #878787;
                             font-size:14px;
                         }
                     }
                     .zhihu{
                         background-position: 0 0;
                     }
                     .weibo{
                         background-position: 0 -52px;
                     }
                     .toutiao{
                         background-position: 0 -110px;
                     }
                 }
                 .right-group{
                     float: right;
                     margin-right: 20px;
                     width:120px;
                     background: url("https://www.bufanbiz.com/static/build/images/footer-wx-share.png");
                     background-repeat:no-repeat;
                     background-size:100%;
                     .desc{
                         font-size: 12px;
                         color: #000000;
                         margin-top: 120px;
                     }
                 }
             }
             .hot-news-group{
                 .hot-list-group{
                     padding:0 20px;
                     li{
                         overflow: hidden;
                         border-bottom: 1px solid #EDEDED;
                         .left-group{
                             float: left;
                             width: 190px;
                             height:110px;
                             position: relative;
                             .title{
                                 a{
                                     color: #000;
                                     &:hover{
                                         color: orangered;
                                     }
                                 }
                             }
                             .more{
                                 font-size: 14px;
                                 position: absolute;
                                 left:0;
                                 right:0;
                                 bottom:10px;
                                 .category{
                                     float: left;
                                 }
                                 .pub-time{
                                     float: right;
                                 }
                             }
                         }
                         .right-group{
                            float: right;
                             a{
                                 height:80px;
                                 width: 80px;
                                 img{
                                     width:120px;
                                     height:100px;
                                 }
                             }
                         }
                     }
                 }
             }
         }
    }
}

.main{
    .wrapper{
        .main-content-wrapper{
            padding:20px;
            box-sizing: border-box;
            width:800px;
            background: #fff;
            float: left;
            .news-wrapper{
                h1{
                    color: #212121;
                    font-size:24px;
                    font-weight:400;
                }
                .news-info{
                    margin-top:20px;
                    overflow: hidden;
                    font-size: 14px;
                    color: #878787;
                    height:30px;
                    line-height: 30px;
                    .info-group{
                        float: left;
                        span{
                            margin-right: 20px;
                        }
                        .category{
                            color: #fff;
                            background: #f6766a;
                            padding:0 5px;
                            border-radius: 2px;
                        }
                    }
                    .share-group{
                        float: right;
                        overflow: hidden;
                        span{
                            float: left;
                        }
                        a{
                            float: left;
                        }
                        .share{
                            background: url("https://www.bufanbiz.com/static/build/images/share.png");
                            background-repeat: no-repeat;
                            background-size: 200%;
                            height: 30px;
                            width:30px;
                        }
                        .weixin{
                            margin-right:8px;
                        }
                        .weibo{
                            background-position: -35px;
                        }
                    }
                }
                .article{
                    margin-top:20px;
                    img{
                        max-width: 100%;
                    }
                }
            }
            .comment-wrapper{
                margin-top:20px;
                width:100%;
                border-top:1px solid #ccc;
                .title{
                    font-size:18px;
                    color: #212121;
                    font-weight:400;
                    padding-top:20px;
                }
                .comment-textarea{
                    margin-top:10px;
                    width:100%;
                    resize: none;
                    border-radius: 5px;
                    border:1px solid #ccc;
                    outline: none;
                    font-size:14px;
                    padding:6px 10px;
                    box-sizing: border-box;
                }
                .nologin-textarea{
                    height:40px;
                    line-height: 22px;
                }
                .logined-textarea{
                    height:80px;
                }
                .submit-btn-group{
                    margin-top:10px;
                    text-align: right;
                    .submit-btn{
                        background: #5C87D9;
                        padding:7px 13px;
                        border-radius: 5px;
                        border:0;
                        color: #fff;
                        cursor: pointer;
                    }
                }
            }
            .comment-list{
                margin-top:20px;
                li{
                    font-size:16px;
                    color: #878787;
                    border-bottom: 1px solid #ccc;
                    .comment-info{
                        height: 40px;
                        line-height: 40px;
                        overflow: hidden;
                        margin-top:15px;
                        img{
                            float: left;
                            height:40px;
                            width:40px;
                            border-radius: 50%;
                            margin-right:10px;
                        }
                        .author{
                            float: left;
                        }
                        .pub-time{
                            float: right;
                        }
                    }
                    .comment-content{
                        margin-top:10px;
                        font-size: 16px;
                        color: black;
                        margin-left: 50px;
                        margin-bottom:20px;
                    }
                }
            }
        }
    }
}

